<template>
  <div class="demo-container">
    <h2>HmiBatchDelete 组件演示</h2>
    
    <div class="demo-section">
      <h3>基本用法</h3>
      <HmiBatchDelete
        :api-path="/api/demo"
        :id-key="'ID'"
        :delete-key="'index'"
        :show-toolbar="true"
        :show-actions="true"
        :page-size="10"
        @data-loaded="handleDataLoaded"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @operation-success="handleOperationSuccess"
        @error="handleError"
      />
    </div>

    <div class="demo-info">
      <h3>事件信息</h3>
      <div class="info-item">
        <strong>数据加载状态:</strong> {{ dataLoaded ? '已加载' : '未加载' }}
      </div>
      <div class="info-item">
        <strong>选中行数:</strong> {{ selectedCount }}
      </div>
      <div class="info-item">
        <strong>最后点击的行:</strong> {{ lastClickedRow ? JSON.stringify(lastClickedRow) : '无' }}
      </div>
      <div class="info-item">
        <strong>最后操作:</strong> {{ lastOperation || '无' }}
      </div>
      <div class="info-item">
        <strong>错误信息:</strong> {{ lastError || '无' }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import HmiBatchDelete from "./index.vue";
import type { HmiBatchDeleteRow } from "./types";

defineOptions({
  name: "HmiBatchDeleteDemo",
});

// 状态
const dataLoaded = ref(false);
const selectedCount = ref(0);
const lastClickedRow = ref<HmiBatchDeleteRow | null>(null);
const lastOperation = ref<string>("");
const lastError = ref<string>("");

// 事件处理
function handleDataLoaded(data: HmiBatchDeleteRow[]) {
  dataLoaded.value = true;
  ElMessage.success(`数据加载完成，共 ${data.length} 条记录`);
  console.log("数据加载完成:", data);
}

function handleSelectionChange(selection: HmiBatchDeleteRow[]) {
  selectedCount.value = selection.length;
  console.log("选择变更:", selection);
}

function handleRowClick(row: HmiBatchDeleteRow) {
  lastClickedRow.value = row;
  console.log("行点击:", row);
}

function handleOperationSuccess(type: string, data: any) {
  lastOperation.value = `${type} - ${new Date().toLocaleTimeString()}`;
  ElMessage.success(`${type} 操作成功`);
  console.log("操作成功:", { type, data });
}

function handleError(error: Error) {
  lastError.value = `${error.message} - ${new Date().toLocaleTimeString()}`;
  ElMessage.error(`操作失败: ${error.message}`);
  console.error("操作失败:", error);
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 30px;
  
  h3 {
    margin-bottom: 15px;
    color: #409eff;
    border-bottom: 2px solid #409eff;
    padding-bottom: 5px;
  }
}

.demo-info {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  
  h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #303133;
  }
  
  .info-item {
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e4e7ed;
    
    &:last-child {
      border-bottom: none;
    }
    
    strong {
      color: #606266;
      margin-right: 10px;
    }
  }
}
</style>
